<template>
  <!--  <h1>个人信息</h1>-->
  <!--所有的元素，必须不能直接在根节点下-->
  <div>
    <h1>个人信息</h1>
    {{id}},------------{{name}}
    <!--    {{ $route.params.id }}-->
    <!--    {{ $route.params.name }}-->
  </div>
</template>

<script>
  export default {
    name: "UserProfile",
    props: [
      'id', 'name'
    ],
    //


    /*参数说明：
    to：路由将要跳转的路径信息
   from：路由跳转前的路径信息
   next：路由的控制参数
   next() 跳入下一个页面
   next('/path') 改变路由的跳转方向，使其跳到另一个路由
   next(false) 返回原来的页面
   next(vm => {}) 仅在 beforeRouteEnter 中可用，vm是组件实例
   */

    //过滤器
    beforeRouteEnter: (to, from, next) => {
      console.log('进入路由之前');
      // next();
      // 加载数据
      next(vm => {
        vm.getData()//进入路由指引执行getData()
      });
    },
    beforeRouteLeave: (to, from, next) => {
      console.log('离开路由之前');
      next();
    },
    //安装 Axios  npm install --save axios vue-axios
    methods: {
      getData: function () {
        // this.axios.get('http://localhost:8080/static/mock/data.json').then((response)=>{
        //   console.log(response.data)
        // })
        this.axios({
          method: 'get',
          url: 'http://localhost:8080/static/mock/datavue.json'
        }).then(function (response) {
          console.log(response.data)
        })
      }
    }
  }
</script>

<style scoped>

</style>
